<!DOCTYPE html>
<html>
<head>
    <title>Physics Pendulum System</title>
</head>
<body>
<canvas id="physicsCanvas" width="550" height="400" style="border: 1px solid #ccc;"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // --- Style Settings ---
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 1.5;
    ctx.font = 'italic 22px "Times New Roman"';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // --- Define Geometry ---
    const centerX = canvas.width / 2;
    const ceilingY = 70;
    const plateWidth = 260;
    const rodLength = 180;

    const plateY = ceilingY + rodLength;
    const plateX1 = centerX - plateWidth / 2;
    const plateX2 = centerX + plateWidth / 2;

    // --- Draw Ceiling ---
    ctx.beginPath();
    const ceilingStartX = plateX1 - 60;
    const ceilingEndX = plateX2 + 60;
    ctx.moveTo(ceilingStartX, ceilingY);
    ctx.lineTo(ceilingEndX, ceilingY);
    ctx.stroke();

    // Draw hatching for the ceiling
    const hatchLength = 15;
    const hatchSpacing = 15;
    for (let x = ceilingStartX; x < ceilingEndX; x += hatchSpacing) {
        ctx.beginPath();
        ctx.moveTo(x, ceilingY);
        ctx.lineTo(x + hatchLength / 1.414, ceilingY - hatchLength / 1.414);
        ctx.stroke();
    }

    // --- Draw Rods ---
    ctx.beginPath();
    // Left rod
    ctx.moveTo(plateX1, ceilingY);
    ctx.lineTo(plateX1, plateY);
    // Right rod
    ctx.moveTo(plateX2, ceilingY);
    ctx.lineTo(plateX2, plateY);
    ctx.stroke();

    // --- Draw Plate ---
    ctx.save();
    ctx.lineWidth = 3;
    ctx.beginPath();
    ctx.moveTo(plateX1, plateY);
    ctx.lineTo(plateX2, plateY);
    ctx.stroke();
    ctx.restore();

    // --- Draw Ball ---
    const ballRadius = 6;
    const ballX = centerX;
    const ballY = plateY - ballRadius;
    ctx.beginPath();
    ctx.arc(ballX, ballY, ballRadius, 0, 2 * Math.PI);
    ctx.fill();

    // --- Helper function to draw an arrow ---
    function drawArrow(context, fromx, fromy, tox, toy) {
        const headlen = 10; // length of head in pixels
        const dx = tox - fromx;
        const dy = toy - fromy;
        const angle = Math.atan2(dy, dx);
        context.beginPath();
        context.moveTo(fromx, fromy);
        context.lineTo(tox, toy);
        context.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
        context.moveTo(tox, toy);
        context.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
        context.stroke();
    }
    
    // --- Draw Velocity Vector ---
    const arrowStartX = plateX2 + 20;
    const arrowLength = 60;
    const arrowEndX = arrowStartX + arrowLength;
    drawArrow(ctx, arrowStartX, plateY, arrowEndX, plateY);


    // --- Draw Labels ---
    // Label 'l' for rods
    ctx.fillText('l', plateX1 - 25, ceilingY + rodLength / 2);
    ctx.fillText('l', plateX2 + 25, ceilingY + rodLength / 2);

    // Label 'M' for plate
    ctx.fillText('M', centerX, plateY + 30);

    // Label 'm' for ball
    ctx.fillText('m', centerX, ballY - 25);

    // Label 'v0' for velocity
    ctx.font = 'italic 22px "Times New Roman"';
    ctx.fillText('v', arrowEndX + 15, plateY + 2);
    ctx.font = 'italic 16px "Times New Roman"';
    ctx.fillText('0', arrowEndX + 15 + 10, plateY + 8);

</script>
</body>
</html>